<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tuding手风琴jQ</title>
<style type="text/css">
li{list-style:none;}

.accordionY { margin:0; padding:0; }
.accordionY .panel .heading { display:block; background:#F5ECD5 url(../img/more.png) 10px 50% no-repeat; display:block; margin:0; padding-left:30px; line-height:30px; border:1px solid #CCC; }
.accordionY .panel .heading.active { background:#F5ECD5 url(../img/less.png) 10px 50% no-repeat; }
.accordionY .panel { list-style:none; }
.accordionY .panel .content { display:none; padding:20px; border:1px solid #CCC; border-top-width:0; }
.accordingY .panel.active .content { display:block; padding:20px; border:1px solid #CCC; border-top-width:0;}


li{list-style:none;}

.accordionX { margin:0; padding:0; }
.accordionX .panel{display:table-cell;height:200px;}
.accordionX .panel .heading { display:block; background:#F5ECD5 url(../img/more.png) 10px 50% no-repeat; display:block; width:30px; height:200px; margin:0; padding-left:30px; line-height:30px; border:1px solid #CCC; }
.accordionX .panel.active .heading { background:#F5ECD5 url(../img/less.png) 10px 50% no-repeat; }
.accordionX .panel { list-style:none; }
.accordionX .panel .content { display:none;margin-left:; }
.accordionX .panel .content { display:none; padding:20px; border:1px solid #CCC; border-top-width:0; }
.accordionX .panel .heading, .accordionX .panel .content{display:table-cell;}

.nm .filling { padding-left:240px; }
.nm .ming { float:right; width:100%; }
.nm .n1 { width:240px; float:left; margin-right:-240px; left:-240px; }
</style>
<script type="text/javascript" src="../js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$('.accordionY .heading').click(function() {
		$(this).toggleClass('active');
		$(this).next().slideToggle('slow');
		$(this).parent().siblings().each(function() {
			$(this).removeClass('active');
			$(this).children('.content').slideUp('slow');
		})
	})
})
/* ######### ######### ######### 注释 ######### ######### ######### */
$(document).ready(function() {
	$('.accordionX .heading').click(function() {
		$(this).parent().toggleClass('active');
		$(this).next().animate({width:'toggle'},'slow');
		$(this).parent().siblings().each(function() {
			$(this).removeClass('active');
			$(this).children('.content').animate({width:'-=20px'},'slow');
		})
	})
})
</script>
</head>
<body>
<div class="accordionY ding" id="rcmd_hot">
  <ul class="group ding">
    <li class="panel active">
      <a class="heading" href="#"><span>标签1</span></a>
      <div class="content">
        <p style="padding:10px;"><a href="http://www.w3.org/">万维网联盟(W3C)</a>联合关心万维网技术发展的群体，以多数认同为原则，主要依靠会员、全职工作人员、全球办事处，以及公众的共同努力和奉献，来开发高质量的万维网标准，以实现其"共享同一个万维网"的使命。W3C中国办事处自2006年成立起，努力致力于促进国内外万维网标准领域信息沟通互动，为国内企业、高校、及科研机构参与国际信息技术标准化的研究、集成和推广提供更好的服务。 </p>
      </div>
    </li>
    <li class="panel">
      <a class="heading" href="#"><span>标签2</span></a>
      <div class="content">
        <ul style="padding:10px;">
          <li>&rsaquo; <a href="#">这里展示的是标签2的第一个列表</a> <span class="time">2010.12.24</span></li>
          <li>&rsaquo; <a href="#">这里展示的是标签2的第二个列表</a> <span class="time">2010.12.24</span></li>
          <li>&rsaquo; <a href="#">这里展示的是标签2的第三个列表</a> <span class="time">2010.12.24</span></li>
          <li>&rsaquo; <a href="#">这里展示的是标签2的第四个列表</a> <span class="time">2010.12.24</span></li>
          <li>&rsaquo; <a href="#">这里展示的是标签2的第五个列表</a> <span class="time">2010.12.24</span></li>
          <li>&rsaquo; <a href="#">这里展示的是标签2的第六个列表</a> <span class="time">2010.12.24</span></li>
          <li>&rsaquo; <a href="#">这里展示的是标签2的第七个列表</a> <span class="time">2010.12.24</span></li>
          <li class="more">&rsaquo; <a href="#">更多</a></li>
        </ul>
      </div>
    </li>
    <li class="panel">
      <a class="heading" href="#"><span>标签3</span></a>
      <div class="content">
        <ul style="padding:10px;">
          <li>&rsaquo; <a href="#">这里展示的是标签3的第一个列表</a> <span class="time">2010.12.24</span></li>
          <li>&rsaquo; <a href="#">这里展示的是标签3的第二个列表</a> <span class="time">2010.12.24</span></li>
          <li>&rsaquo; <a href="#">这里展示的是标签3的第三个列表</a> <span class="time">2010.12.24</span></li>
          <li>&rsaquo; <a href="#">这里展示的是标签3的第四个列表</a> <span class="time">2010.12.24</span></li>
          <li>&rsaquo; <a href="#">这里展示的是标签3的第五个列表</a> <span class="time">2010.12.24</span></li>
          <li>&rsaquo; <a href="#">这里展示的是标签3的第六个列表</a> <span class="time">2010.12.24</span></li>
          <li>&rsaquo; <a href="#">这里展示的是标签3的第七个列表</a> <span class="time">2010.12.24</span></li>
          <li>&rsaquo; <a href="#">这里展示的是标签3的第八个列表</a> <span class="time">2010.12.24</span></li>
          <li class="more">&rsaquo; <a href="#">更多</a></li>
        </ul>
      </div>
    </li>
  </ul>
</div>
<!-- ######### ######### ######### 注释 ######### ######### ######### -->
<hr />
<div class="accordionX ding" id="rcmd_hot">
  <ul class="group ding">
    <li class="panel active">
      <a class="heading" href="#"><span>标签1</span></a>
      <div class="content">
        <p style="padding:10px;"><a href="http://www.w3.org/">万维网联盟(W3C)</a>联合关心万维网技术发展的群体，以多数认同为原则，主要依靠会员、全职工作人员、全球办事处，以及公众的共同努力和奉献，来开发高质量的万维网标准，以实现其"共享同一个万维网"的使命。W3C中国办事处自2006年成立起，努力致力于促进国内外万维网标准领域信息沟通互动，为国内企业、高校、及科研机构参与国际信息技术标准化的研究、集成和推广提供更好的服务。 </p>
      </div>
    </li>
    <li class="panel">
      <a class="heading" href="#"><span>标签2</span></a>
      <div class="content">
        <ul style="padding:10px;">
          <li>&rsaquo; <a href="#">这里展示的是标签2的第一个列表</a> <span class="time">2010.12.24</span></li>
          <li>&rsaquo; <a href="#">这里展示的是标签2的第二个列表</a> <span class="time">2010.12.24</span></li>
          <li>&rsaquo; <a href="#">这里展示的是标签2的第三个列表</a> <span class="time">2010.12.24</span></li>
          <li>&rsaquo; <a href="#">这里展示的是标签2的第四个列表</a> <span class="time">2010.12.24</span></li>
          <li>&rsaquo; <a href="#">这里展示的是标签2的第五个列表</a> <span class="time">2010.12.24</span></li>
          <li>&rsaquo; <a href="#">这里展示的是标签2的第六个列表</a> <span class="time">2010.12.24</span></li>
          <li>&rsaquo; <a href="#">这里展示的是标签2的第七个列表</a> <span class="time">2010.12.24</span></li>
          <li class="more">&rsaquo; <a href="#">更多</a></li>
        </ul>
      </div>
    </li>
    <li class="panel">
      <a class="heading" href="#"><span>标签3</span></a>
      <div class="content">
        <ul style="padding:10px;">
          <li>&rsaquo; <a href="#">这里展示的是标签3的第一个列表</a> <span class="time">2010.12.24</span></li>
          <li>&rsaquo; <a href="#">这里展示的是标签3的第二个列表</a> <span class="time">2010.12.24</span></li>
          <li>&rsaquo; <a href="#">这里展示的是标签3的第三个列表</a> <span class="time">2010.12.24</span></li>
          <li>&rsaquo; <a href="#">这里展示的是标签3的第四个列表</a> <span class="time">2010.12.24</span></li>
          <li>&rsaquo; <a href="#">这里展示的是标签3的第五个列表</a> <span class="time">2010.12.24</span></li>
          <li>&rsaquo; <a href="#">这里展示的是标签3的第六个列表</a> <span class="time">2010.12.24</span></li>
          <li>&rsaquo; <a href="#">这里展示的是标签3的第七个列表</a> <span class="time">2010.12.24</span></li>
          <li>&rsaquo; <a href="#">这里展示的是标签3的第八个列表</a> <span class="time">2010.12.24</span></li>
          <li class="more">&rsaquo; <a href="#">更多</a></li>
        </ul>
      </div>
    </li>
  </ul>
</div>
<div style="color:#F00;">此行文字仅作为Accordion的高度参照</div>
<div class="wrapping">
  <div id="colophon">
    <address style="text-align:center;">
      <em>Copyright ©</em> <a href="http://www.bubujie.net/" target="_blank">街工作室</a> 2008-2012 All Rights Reserved.
    </address>
  </div>
</div>
</body>
</html>
